$(function () {

    $(".btn-l").on("click", function () {

        ClassName($(this))

    });
    $(".btn-r").on("click", function () {

        ClassName($(this))
    });

    

    $(".video_btn").on("click", function () {
     
        $(this).hide().siblings("video")[0].play(); 

        $(this).siblings("video").attr('controls',true)    
    });

    // $("#andr").on("mouseover",function(){    
    //     // $(".download_img li").eq(0).show();
    //     // $(".download_img li").eq(1).hide();
    //     $('#xz1').show();
    //     $('#xz2').hide().addClass('hide')

    // })
    // $("#ios").on("mouseover",function(){
    //     // $(".download_img li").eq(1).show().removeClass('hide');
    //     // $(".download_img li").eq(0).hide();

    //     $('#xz1').hide();
    //     $('#xz2').show().removeClass('hide')

    // })
    // $("#andr").on("click",function(){    
    //     // $(".download_img li").eq(0).show();
    //     // $(".download_img li").eq(1).hide();
    //     $('#xz1').show();
    //     $('#xz2').hide().addClass('hide')

    // })
    // $("#ios").on("click",function(){
    //     // $(".download_img li").eq(1).show().removeClass('hide');
    //     // $(".download_img li").eq(0).hide();
    //     $('#xz1').hide();
    //     $('#xz2').show().removeClass('hide')

    // })

})

function ClassName(that) {
    that.css("border", "0");

    var index = $(".swiper-slide-active").attr("data-swiper-slide-index");
    switch (Number(index)) {
        case 0:
            $(".ul li").removeClass("active").find("h6").removeClass("active").siblings("p").removeClass("active")
            $(".ul li").eq(0).addClass("active").find("h6").addClass("active").siblings("p").addClass("active");
            break;
        case 1:
            $(".ul li").removeClass("active").find("h6").removeClass("active").siblings("p").removeClass("active")
            $(".ul li").eq(1).addClass("active").find("h6").addClass("active").siblings("p").addClass("active");

            break;
        case 2:
            $(".ul li").removeClass("active").find("h6").removeClass("active").siblings("p").removeClass("active")
            $(".ul li").eq(2).addClass("active").find("h6").addClass("active").siblings("p").addClass("active");

            break;
        case 3:
            $(".ul li").removeClass("active").find("h6").removeClass("active").siblings("p").removeClass("active")
            $(".ul li").eq(3).addClass("active").find("h6").addClass("active").siblings("p").addClass("active");

            break;
    }
}


